<!--分区域-->
<template>
  <div class="fenqy">
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker v-model="form.year" value-format="yyyy" type="year" placeholder="选择年"></el-date-picker>
        </el-form-item>
        <el-form-item class="btnForm" style="width: 35%;">
          <el-button size="small" type="primary" @click="submitHandle()">查询</el-button>
          <el-button size="small" type="orange" @click="allExportModal()">批量导出</el-button>
          <el-button size="small" type="orange" @click="exportModal()" >导出</el-button>
        </el-form-item>
        <el-form-item class="annual">
          <template>
            <div class="title">筛选条件：</div>
            <div class="border">
              <div><span class="paddRig">跟踪指标：</span>
                <el-checkbox-group v-model="trackingArr" @change="trackingClick">
                  <el-checkbox v-for="(item,index) in trackType" :label="item" :key="index">{{item.indexName}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div><span class="paddRig">跟踪维度：</span>
                <el-radio-group v-model="form.radio" @change='checedRadio'>
                  <el-radio :label="1">全部明细</el-radio>
                  <el-radio :label="2">只看进度</el-radio>
                </el-radio-group>
              </div>
            </div>
          </template>
        </el-form-item>
      </el-form>
    </div>
    <p class="g-unit">单位: 万户</p>
    <div v-show="form.radio==1">
      <div class="tableBox"   v-for="(item,index) in tableAllData" :key="item.parentName" v-if="trackingArr">
        <el-table v-loading="tableLoading" :data="tableDataObj['tableData'+index]"  style="width: 100%" class="tableTh28"
          border stripe :ref="'table'+index" :span-method="(obj)=>arraySpanMethod(obj,index)">
          <el-table-column :label="item.parentName" prop="class1Name" class-name="first-title" width="100" fixed></el-table-column>
          <el-table-column :label="item.parentName" prop="class2Name" class-name="second-title" width="100" fixed></el-table-column>
          <el-table-column v-for="(item,index) in colDefList" :key="index" :label="item">
            <el-table-column width="100" label="目标值" :prop="'targetValue'+(index)"></el-table-column>
            <el-table-column width="100" label="实际完成" :prop="'actValue'+(index)"></el-table-column>
            <el-table-column label="完成进度(%)" :prop="'process'+(index)"></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 其他 -->
    <div v-show="form.radio==2">
      <div class="tableBox" v-if="trackingArr&&JSON.stringify(trackingArr).indexOf(item1.parentName)>-1"   v-for="(item1,index1) in tableAllData1" :key="item1.parentName">
        <el-table v-loading="tableLoading" :data="tableDataObj1['tableData'+index1]" style="width: 100%" class="tableTh28" border stripe :ref="'table'+index1"
          :span-method="(obj)=>arraySpanMethod(obj,index1)">
          <el-table-column :label="item1.parentName" prop="class1Name" class-name="first-title" width="100" fixed></el-table-column>
          <el-table-column :label="item1.parentName" prop="class2Name" class-name="second-title" width="100" fixed></el-table-column>
          <el-table-column v-for="(item,index) in colDefList1" :key="index" :label="item" :prop="'process'+(index)">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    $budgetAPI
  } from "@/api";
  import prefixAPI from "@/api/prefixAPI"
  import {
    getSessionStorage
  } from "@/common/js/storage";
  import {
    mergeTableRow,
    mergeSpan
  } from "@/utils/mixin";
  import {getCookie} from "@/common/js/cookie"
  let accountInfo = JSON.parse(getSessionStorage('accountInfo'))
  export default {
    name: "fenqy",
    props: {
      areaList: {
        type: Array,
        default: () => ([])
      }
    },
    data() {
      return {
        form: {
          areaId: accountInfo.areaId,
          year: '',
          dimension: 1,
          radio: 1,
        },
        accountInfo: "",
        checkList: [],
        indexType: 2,
        trackType: [],
        trackingList: [],
        trackingArr: [],
        checked: [],
        indexTypeStr: [],
        trackMonthStr: [],
        colDefList: [],
        colDefList1: [],
        tableData0: [],
        tableData1: [],
        tableData2: [],
        tableData3: [],
        tableData4: [],
        tableData5: [],
        tableData6: [],
        tableData7: [],
        tableData8: [],
        tableData9: [],
        tableData10: [],
        tableData11: [],
        tableLoading: false,
        spanArr0: [],
        spanArr1: [],
        spanArr2: [],
        spanArr3: [],
        spanAr4: [],
        spanArr5: [],
        spanArr6: [],
        spanArr7: [],
        spanArr8: [],
        spanArr9: [],
        spanArr10: [],
        spanArr11: [],
        spanArr12: [],
        allData: [],
        tableAllData:[],
        tableDataObj: {},
        tableAllData1:[],
        tableDataObj1: {},
      };
    },
    created () {
    },
    mounted() {
      this.getParams();
    },
    methods: {
      //table合并行
      arraySpanMethod({ row, column, rowIndex, columnIndex },index) {
        if (columnIndex == 0 || columnIndex == 1 ) {
          return this['spanArr'+index][rowIndex][columnIndex];
        }
      },
      async getParams() {
        this.form.year = await this.getMaxMonthByTrackType();
        this.trackingArr = await this.getTrackType();
        this.submitHandle();
      },
      //获取指标数组对象
      trackingClick(val) {
        // console.log(val)
        // this.submitHandle();
      },
      //获取跟踪指标
      getTrackType() {
        var that = this
        return new Promise(resolve => {
          $budgetAPI.getTrackType({
              indexType: this.indexType
            },
            res => {
              if (res && res.code == 0) {
                that.trackType = res.content;
                 // that.trackType.sort((a,b)=>{
                 //   console.log(Number(a.indexCode.substring(1)))
                 //   return Number(a.indexCode.substring(1))-Number(b.indexCode.substring(1))

                 // })

                // that.indexTypeStr = res.content;
                resolve(res.content)
              }
            },
            err => {}
          )
        });
      },
      //获取年份
      getMaxMonthByTrackType() {
        var that = this
        return new Promise(resolve => {
          $budgetAPI.getMaxMonthByTrackType({
              indexType: this.indexType,
              areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
            },
            res => {
              if (res && res.code == 0) {
                that.form.year = res.content;
                resolve(res.content)
              }
            },
            err => {}
          );
        });
      },
      //获取跟踪维度
      checedRadio(val) {
        this.form.radio = val
        this.submitHandle()
      },
      //点击查询
      async submitHandle() {
        let params = {
          areaId: this.form.areaId ? this.form.areaId : this.accountInfo.areaId,
          testYear: this.form.year,
          indexTypeStr: JSON.stringify(this.trackingArr),
          indexType: 2
        }
        this.getData(params);
      },
      getData(params) {
        if (this.form.radio == 1) {
          this.tableLoading = true;
          var that = this
          $budgetAPI.getReleaseTrackData(params, res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList = res.content.areaNames
              that.tableAllData=res.content.data
              res.content.data.forEach((item,index)=>{
                that.$set(that.tableDataObj,'tableData'+index,item.dataList)
                that.tableDataObj['tableData'+index].map((item,index)=>{
                   item.dataList.map((ele, ind) => {
                        item['targetValue' + ind] = ele.targetValue
                        item['actValue' + ind] = ele.actValue
                        item['process' + ind] = ele.process
                      })
                })
              })
              for (let i = 0; i <that.tableAllData.length; i++) {
                that['spanArr' + i] = mergeSpan(that.tableDataObj['tableData' + i], ['class1Name','class2Name'])
              }
            } else {
              this.alertError(res);
            }
            setTimeout(() => {
              for (let prop in that.tableDataObj) {
                that.$refs[prop] && that.$refs[prop].doLayout();
              }
            }, 500);

          });
        } else if((this.form.radio == 2)){
          this.tableLoading = true;
          var that = this
          $budgetAPI.getReleaseTrackData(params, res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList1 = res.content.areaNames
              that.tableAllData1=res.content.data
              res.content.data.forEach((item,index)=>{
                that.$set(that.tableDataObj1,'tableData'+index,item.dataList)
                that.tableDataObj1['tableData'+index].map((item,index)=>{
                   // console.log(item)
                   item.dataList.map((ele, ind) => {
                        item['targetValue' + ind] = ele.targetValue
                        item['actValue' + ind] = ele.actValue
                        item['process' + ind] = ele.process
                      })
                })
              })
              for (let i = 0 ; i <that.tableAllData1.length; i++) {
                this['spanArr' + i] = mergeSpan(that.tableDataObj['tableData' + i], ['class1Name','class2Name'])
              }

            } else {
              this.alertError(res);
            }
            setTimeout(() => {
            for (let prop in that.tableDataObj1) {
              that.$refs[prop] && that.$refs[prop].doLayout();
            }
            }, 500);
          });

        }
      },
    //导出
    exportModal() {
      let areaId = this.form.areaId;
      let testYear = this.form.year;
      let indexTypeStr1 = [];
      this.trackingArr.map((item,index) =>{
        indexTypeStr1[index] = item.indexName
      })
      let indexTypeStr = indexTypeStr1.toString().replace(/\"/ig, '\'');
      // let trackMonthStr = JSON.stringify(this.trackMonthStr);
      let indexType=2;
      let token = getCookie('token');
        // 根据不同模式切换不同的路径
    if(this.form.radio == 1){
       let isShowDetail=true;
      // 根据不同模式切换不同的路径
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
          `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
           `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
      }
    }else{
      let isShowDetail=false;
      // 根据不同模式切换不同的路径
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc +
         `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp +
        `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
      }
    }
      },
     //批量导出
      allExportModal() {
        let areaId = this.form.areaId;
        let testYear = this.form.year;
        let indexTypeStr1 = [];
        this.trackingArr.map((item,index) =>{
          indexTypeStr1[index] = item.indexName
        })
        let indexTypeStr = indexTypeStr1.toString().replace(/\"/ig, '\'');
        // let trackMonthStr = JSON.stringify(this.trackMonthStr);
        let indexType=2;
        let token = getCookie('token');
          // 根据不同模式切换不同的路径
      if(this.form.radio == 1){
         let isShowDetail=true;
        // 根据不同模式切换不同的路径
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
            `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
             `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
        }
      }else{
        let isShowDetail=false;
        // 根据不同模式切换不同的路径
        if (process.env.NODE_ENV == "development") {
          window.location.href =
            prefixAPI.loc +
           `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
        } else if (process.env.NODE_ENV == "production") {
          window.location.href =
            prefixAPI.hp +
          `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexTypeStr=${indexTypeStr}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
        }
      }
        },
    }
  };
</script>
<style lang="scss" scoped>

  .tableBox {
    .first-title.is-leaf {
        position: relative;
        border-right: 1px solid #d7e5fb !important;
        .cell {
         color: #d7e5fb;
        }
    }

    .second-title.is-leaf {
      overflow: visible;
      .cell {
        transform: translateX(-60%);
      }
    }

  }
</style>
<style lang="scss">
  .fenqy {
    .tableBox {
      .first-title.is-leaf {
          position: relative;
          border-right: 1px solid #d7e5fb !important;
          .cell {
           color: #d7e5fb;
          }
      }

      .second-title.is-leaf {
        overflow: visible;
        .cell {
          transform: translateX(-60%);
        }
      }

    }
    .operation {
      .annual {
        width: 100%;
        padding-left: 20px;

        .el-form-item__content {
          width: 100%;
        }

        .title {
          font-size: 18px;
        }

        .paddRig {
          padding-right: 25px;
        }

        .border {
          border: 1px solid #DCDFE6;
          padding: 0 20px;
          margin-bottom: 10px;

          .el-checkbox-group {
            display: inline-block;
          }
        }
      }
    }
  }
</style>
